<template>
    <div>
        <el-row class="wathdra_record">
            <el-col :span="24" class="leave_header_title">
                <div class="leave_title">
                    <div class="leave_left">
                        挂失管理
                        &#X3000;&#X3000;
                        <el-button type="primary" size="small" @click="uploadLoseData()">上传挂失数据</el-button>
                        &#X3000;&#X3000;
                        <el-date-picker
                                v-model="form.time_interval"
                                type="daterange"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                size="small"
                                format="yyyy-MM-dd"
                                :default-time="['00:00:00', '23:59:59']">
                        </el-date-picker>
                        &#X3000;
                        <el-button type="primary" size="small" @click="chooseLose()">筛选</el-button>
                    </div>
                    <div class="leave_right choose_right_input">
                        <el-input type="text" placeholder="请输入关键字" v-model="form.keyWord" clearable @clear="chooseLose()"></el-input><el-button type="primary" size="small" @click="chooseLose()">搜索</el-button>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column type="index" label="序号" width="55"> </el-table-column>
            <el-table-column prop="bill_number" label="票据号"> </el-table-column>
            <el-table-column prop="bill_sum_price" label="票面金额"> </el-table-column>
            <el-table-column prop="announce_court" label="公告法院"> </el-table-column>
            <el-table-column prop="enterprise_name" label="申请人"> </el-table-column>
            <el-table-column label="出票时间">
                <template slot-scope="scope">
                    <span>{{scope.row.draw_time_Y}}</span><br/><span>{{scope.row.draw_time_H}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="announce_time" label="公告时间">
                <template slot-scope="scope">
                    <span>{{scope.row.announce_time_Y}}</span><br/><span>{{scope.row.announce_time_H}}</span>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="removeLose(scope.row.id)"><i class="iconfont icon-shanchu icon_edit_style"></i> 删除</el-button>
                    <el-button type="text" size="small" @click="detailLose(scope.row)"><i class="iconfont icon-xiangqing icon_edit_style"></i> 详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="right clear">
            <el-pagination
                    @size-change="onSizeChange"
                    @current-change="onFlipOver"
                    :current-page="pagination.currentPage"
                    :page-sizes="pagination.pageSizes"
                    :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total">
            </el-pagination>
        </div>
        <DialogContent ref="loseDetailDialog" title="公催详情">
            <div class="rem-dialog-con">
                <el-row>
                    <el-form label-width="130px">
                        <el-col :span="12" class="text_left">
                            <el-form-item label="票据号：" class="admin_bill_price">
                                {{detailForm.bill_number}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="票面金额(元)：">
                                {{detailForm.bill_sum_price}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="公告法院：" class="admin_bill_price">
                                {{detailForm.announce_court}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="申请人：">
                                {{detailForm.enterprise_name}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="出票时间：" class="admin_bill_price">
                                {{detailForm.draw_time}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="公告时间：">
                                {{detailForm.announce_time}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="24" class="text_left">
                            <el-form-item label="备注说明：">
                                {{detailForm.description}}
                            </el-form-item>
                        </el-col>
                    </el-form>
                </el-row>
            </div>
            <span slot="Remfooter" class="submit-btn">
                <el-button size="small" type="info" class="hpx-cancel-color dialog-button" @click="closeDialog()">关闭</el-button>
            </span>
        </DialogContent>
        <DialogInput ref="uploadLoseDialog" title="公催上传">
            <div class="rem-dialog-con lose_data_padding">
                <div class="text_left" @click="downLoadTemplate()"><i class="iconfont icon-xiazai"></i>  <a href="#" class="down_load_a">下载模板</a></div>
                <div class="text_left upload_texts">请上传Excel文件(仅支持97-03的Excel文件格式&#91*xls])</div>
                <div class="prat_upload_box">
                    <div class="upload_box">
                        <i class="iconfont icon-shangchuan"></i>
                    </div>
                </div>
                <el-upload
                        style="display:inline-block"
                        :limit="1"
                        class="upload-demo"
                        ref="upload"
                        accept=".xls,.xlsx"
                        action="/hqx/knowledge/importKnowledge"
                        :file-list="fileList"
                        :http-request="uploadSectionFile"
                        :auto-upload="false">
                    <el-button slot="trigger" size="small" type="primary" plain style="margin-top: 10px;">选取文件</el-button>
                </el-upload>
            </div>
            <span slot="Remfooter" class="submit-btn">
                <el-button type="info" size="small" class="hpx-cancel-color dialog-button" @click="closeDialog()">取消</el-button>
                <el-button type="primary" size="small" class="dialog-button" @click="submitUpload()">上传</el-button>
            </span>
        </DialogInput>
    </div>
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    import Pagination from "@/types/Pagination";
    import DialogContent from '@component/common/DialogContent.vue';
    import DialogInput from '@component/common/DialogInput.vue';
    import moment from 'moment';
    @Component({
        extends: Pagination,
        components: {
            DialogContent,
            DialogInput
        }
    })
    export default class ReportLoseManage extends Vue {
        form = {
            time_interval: [],
            time1: '',
            time2: '',
            keyWord: ''
        }
        detailForm = {}
        tableData = []
        fileList =[]
        chooseLose () {
            this.getAllLose()
        }

        async getAllLose () {
            if (this.form.time_interval == null) {
                this.form.time1 = ''
                this.form.time2 = ''
            } else {
                if (this.form.time_interval.length == 0){
                    this.form.time1 = ''
                    this.form.time2 = ''
                } else {
                    this.form.time1 = moment(this.form.time_interval[0]).format('YYYY-MM-DD')
                    this.form.time2 = moment(this.form.time_interval[1]).format('YYYY-MM-DD')
                }
            }
            let params = {
                n: this.pagination.pageSize,
                p: this.pagination.currentPage,
                orderBy: '',
                time1: this.form.time1,
                time2: this.form.time2,
                keyWord: this.form.keyWord
            }
            let res = await this.$http.get('tools/serviceByPublication',{params})
            if (res.status == 200) {
                let { service_by_publications, page_info } = res.data
                service_by_publications.forEach((i) => {
                    i.draw_time_Y = moment(i.draw_time).format('YYYY-MM-DD')
                    i.draw_time_H = moment(i.draw_time).format('HH:mm:ss')
                    i.announce_time_Y = moment(i.announce_time).format('YYYY-MM-DD')
                    i.announce_time_H = moment(i.announce_time).format('HH:mm:ss')
                })
                this.tableData = service_by_publications;
                this.pagination.total = page_info.items_number;
            }
        }

        detailLose (data) {
            this.detailForm = data;
            this.$refs['loseDetailDialog'].openDialog();
        }
        removeLose (id) {
            this.$confirm('确定删除该公催数据！','提醒',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                customClass: 'custom-message-box',
                center: true
            }).then(() => {
                this.confirmRemoveLose(id)
            }).catch((err) => {
                console.log(err)
            })
        }
        async confirmRemoveLose (id: string|number) {
            let res = await this.$http.delete(`tools/serviceByPublication/${id}`)
            if (res.status == 200) {
                this.getAllLose();
            }
        }
        uploadLoseData () {
            this.$refs['uploadLoseDialog'].openDialog();
        }
        submitUpload () {
            let list = document.getElementsByClassName('el-upload-list__item is-ready')
            if(list.length == 0){
                this.$alert('请选择需要导入的模板！','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {}
                })
                return;
            }
            this.$refs.upload.submit();
        }
        uploadSectionFile (param) {
            var fileObj = param.file;
            var form = new FormData();
            form.append("file", fileObj);
            this.$http.post('tools/excelImport?func=serviceByPublication', form)
                .then((data) => {
                    if (data.status == 200) {
                        this.$notify({
                            title: '提示',
                            message: '上传成功',
                            type: 'success'
                        });
                        this.$refs['uploadLoseDialog'].closeDialog();
                        this.getAllLose()
                        this.fileList = []
                    }else {
                        this.$notify({
                            title: '提示',
                            message: '上传失败',
                            type: 'warning'
                        });
                        this.fileList = []
                    }
                })
        }
        // 下载公催模板
        downLoadTemplate () {
            window.location.href = 'http://hpx-file.oss-cn-hangzhou.aliyuncs.com/templet/%E5%85%AC%E5%82%AC%E6%9F%A5%E8%AF%A2%E6%A8%A1%E6%9D%BF.xls';
        }
        closeDialog () {
            this.$refs['loseDetailDialog'].closeDialog();
            this.$refs['uploadLoseDialog'].closeDialog();
        }
        loadDataForPagination() {
            this.getAllLose()
        }
        mounted () {
            this.getAllLose()
        }
    }
</script>

<style lang="scss" scoped>
    .lose_data_padding {
        padding: 0 68px;
    }
    .prat_upload_box {
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }
    .upload_box {
        width: 160px;
        height: 120px;
        border: 1px solid $__color-border;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .icon-xiazai {
        color: $__color-primary;
    }
    .upload_texts {
        height: 42px;
        line-height: 42px;
        color: $__color-remind;
    }
    .icon-shangchuan {
        color: $__color-border;
        font-size: 32px;
    }
    .down_load_a {
        color: $__color-primary;
    }
</style>